<template>
   <div class="myvideo">
      <!-- 导航 -->
     <top-bar :navList="navList" @post="getSelected"></top-bar>
     <!-- main -->
     <div class="list" v-if="selected==0"> <flex-list></flex-list></div>
     <div class="list" v-else>
        <!-- 视频管理 -->
        <mt-progress class="progress" :value="20" :bar-height="10">
          <p class="start" slot="start">20%</p>
          <p class="end" slot="end">视频正在上传，可以在下列填写视频信息！</p>
        </mt-progress>
        <!-- 表单信息 -->
        <mt-field class="input" label="标题" v-model="title"></mt-field>
        <mt-field class="input" label="简介" type="textarea" rows="3" v-model="introduction"></mt-field>
        <div class="select-box">
           <div><label>分类</label>
             <select class="select1">
              <option value ="volvo">Volvo</option>
              <option value ="saab">Saab</option>
              <option value="opel">Opel</option>
            </select>
           </div>
           <div><label>隐私</label>
             <select class="select2">
              <option value ="volvo">Volvo</option>
              <option value ="saab">Saab</option>
              <option value="opel">Opel</option>
            </select>
           </div>
        </div>
        <mt-button class="submit">确认提交</mt-button>
        <!-- 表单信息end -->
     </div>
   </div>
</template>

<script>
import { Progress, Field, Button } from 'mint-ui'
import TopBar from '@/components/TopBar'
import FlexList from '@/components/FlexList'
export default {
  data () {
    return {
      navList: ['视频管理', '上传视频'],
      selected: 0,
      title: '',
      introduction: ''
    }
  },
  methods: {
    getSelected (e) {
      this.selected = e
    }
  },
  components: {
    TopBar,
    FlexList,
    mtProgress: Progress,
    mtField: Field,
    mtButton: Button
  }
}
</script>
<style lang="less">
  .myvideo {
    padding-top:60px;
    .list { padding: 10px;}
  }
  .progress {
     position: relative; padding-bottom:30px;
    .mt-progress-runway { border-radius: 5px; }
    .mt-progress-progress { border-radius: 5px; background: #ff9a09;}
    p { display: block;}
    .start { position: absolute; top:6px; left: 0; text-align: center; width: 100%; font-size: 12px; color: #39314A; z-index: 2;}
    .end { position: absolute; bottom:0; left: 0; text-align: center; width: 100%; font-size: 12px; color: #39314A; z-index: 2;}
  }

  .input {
    .mint-cell-title { width: 40px;}
    input { height: 30px; border: #dedede 1px solid; border-radius: 5px; padding-left:10px;color: #999; background: #FBFBFB;}
    textarea {border: #dedede 1px solid; line-height: 20px;border-radius: 5px; padding: 5px 10px; color: #999;  background: #FBFBFB}
  }

  .select-box {
     padding: 10px; display: flex; justify-content: space-between;
     div {
       display: flex; align-items: center;
       label { width: 40px;}
       select {
         height: 30px;  border: #dedede 1px solid; border-radius: 5px;
         option { text-align: center; display: block;}
       }
       .select1 {  width: 150px;}
       .select2 { width: 80px;}
     }
  }

  .submit {
    width: 80%; margin: 20px auto; display:block;
    .mint-button-text { color:#fff;}
  }
  .mint-button--normal {background: #ff9a09;}
</style>
